<template>
  <view class="employee-detail-container">
    <!-- 顶部导航栏 -->
    <!-- <view class="top-bar">
      <text class="title">员工详情</text>
      <view class="right-icon" @click="handleBack">
        <image src="/static/xiugai07_1.png" mode="aspectFit" class="back-icon"></image>
      </view>
    </view> -->
    
    <!-- 员工详情内容 -->
    <view class="employee-detail-content" v-if="employeeInfo">
      <!-- 头像和基本信息 -->
      <view class="basic-info-section">
        <view class="avatar-container">
          <image :src="employeeInfo.user?.avatar || '/static/Icon.png'" mode="aspectFill" class="avatar"></image>
        </view>
        
        <view class="basic-info">
          <text class="employee-name">{{ employeeInfo.user?.nickname || employeeInfo.name || '未知' }}</text>
          <text class="employee-job">{{ employeeInfo.job?.name || '未知职位' }}</text>
        </view>
      </view>
      
      <!-- 详细信息列表 -->
      <view class="detail-info-section">
        <view class="info-item">
          <text class="info-label">姓名：</text>
          <text class="info-value">{{ employeeInfo.name || '暂无' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">昵称：</text>
          <text class="info-value">{{ employeeInfo.user?.nickname || '暂无' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">电话号码：</text>
          <text class="info-value">{{ employeeInfo.user?.mobile || '暂无' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">店铺：</text>
          <text class="info-value">{{ employeeInfo.shop?.name || '暂无' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">职位：</text>
          <text class="info-value">{{ employeeInfo.job?.name || '暂无' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">状态：</text>
          <text class="info-value status-{{ employeeInfo.status }}">{{ getStatusText(employeeInfo.status) }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">创建时间：</text>
          <text class="info-value">{{ employeeInfo.createtime || '暂无' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">更新时间：</text>
          <text class="info-value">{{ employeeInfo.updatetime || '暂无' }}</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons-section">
        <button class="edit-button" @click="editEmployee">编辑员工</button>
      </view>
    </view>
    
    <!-- 加载中状态 -->
    <view class="loading-container" v-else>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      employeeInfo: null,
      employeeId: ''
    };
  },
  onLoad(options) {
    if (options.ids) {
      this.employeeId = options.ids;
      this.getEmployeeDetail();
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    }
  },
  methods: {
    // 获取员工详情
    async getEmployeeDetail() {
      try {
        const res = await this.$request({
          url: '/emp/detail',
          method: 'GET',
          params: {
            ids: this.employeeId
          }
        });
        
        if (res.code === 1) {
          this.employeeInfo = res.data;
        } else {
          throw new Error(res.msg || '获取员工详情失败');
        }
      } catch (error) {
        console.error('获取员工详情失败:', error);
        uni.showToast({
          title: '获取员工详情失败',
          icon: 'none'
        });
      }
    },
    
    // 返回上一页
    handleBack() {
      uni.navigateBack();
    },
    
    // 编辑员工
    editEmployee() {
      uni.navigateTo({
        url: `/pages/employeelist/compontens/empedit?ids=${this.employeeId}`
      });
    },
    
    // 获取状态文本
    getStatusText(status) {
      switch(status) {
        case 'normal':
          return '正常';
        case 'disabled':
          return '禁用';
        default:
          return '未知';
      }
    }
  }
};
</script>

<style scoped>
.employee-detail-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 30rpx;
}

/* 顶部导航栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 基本信息区域 */
.basic-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.avatar-container {
  margin-bottom: 20rpx;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 2rpx solid #eee;
}

.employee-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.employee-job {
  font-size: 28rpx;
  color: #666;
}

/* 详细信息区域 */
.detail-info-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  width: 200rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

/* 状态样式 */
.status-normal {
  color: #4cd964;
}

.status-disabled {
  color: #ff9500;
}

/* 操作按钮区域 */
.action-buttons-section {
  padding: 30rpx;
}

.edit-button {
  width: 100%;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 20rpx;
  padding: 24rpx;
  font-size: 32rpx;
  font-weight: bold;
}

/* 加载中样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}
</style>